<template>
<div class="view-container">
    <div class="ui container main">
        <div class="ui padded segment">
            <div class="ui center aligned header">{{!isRegister ? '登陆':'注册'}}</div>
            <div class="ui form">
                <div class="required field">
                    <label for="">Account</label>
                    <input type="text" v-model="email" @focus="$set(isError, 0, false); accountError = true"  placeholder="baozi@example.com" :class="{'input-error': isError[0] || !accountError}">
                    <div class="ui pointing label" v-if="!accountError">
                        {{error_hint}}
                    </div>
                    <p class="hint" v-if="isError[0]">错误的邮箱格式</p>
                </div>
                <div class="required field">
                    <label for="">Password</label>
                    <input type="text" v-model="password1" @focus="$set(isError, 1, false); isPassowrdError = false" placeholder="不少于6位数" :class="{'input-error': isError[1] || isPassowrdError}">
                    <div class="ui pointing label" v-if="isPassowrdError">
                        密码错误
                    </div>
                    <p class="hint" v-if="isError[1]">错误的密码格式</p>
                </div>
                <div class="required field" v-if="isRegister">
                    <label for="">Repeat Password</label>
                    <input type="text" name="" id="" @focus="$set(isError, 2, false)" v-model="password2" placeholder="请再次输入" :class="{'input-error': isError[2]}">
                    <p class="hint" v-if="isError[2]">两次密码不一样</p>
                </div>
                
                <div class="ui hidden divider"></div>

                <div class="ui right aligned container">
                    <button class="ui fluid blue button" :class="{loading: isSubmit}" @click="account">{{!isRegister ? '登陆':'注册'}}</button>
                    <br>
                    <a href="" v-if="!isRegister">忘记密码？</a>&nbsp;&nbsp;&nbsp;
                    <a href="javascript:void(0)" @click="$router.push({path: `/account/${isRegister ? 'login' : 'register'}`})">{{!isRegister ? '注册':'已有账号？立即登陆'}}</a>
                </div>
            </div>
        </div>
    </div>
</div> 

</template>
<script>
import { api_account } from '@/api'
import { mapMutations } from 'vuex'
export default {
    name: 'account',
    data () {
        return {
            email: '',
            password1: '',
            password2: '',
            isError: new Array(3).fill(false),
            isRegister: false,
            isSubmit: false,
            accountError: true,
            isPassowrdError: false,
            error_hint: ''
        }
    },
    mounted () {
        if (this.$route.params.id === 'register') this.isRegister = true
    },
    methods: {
        ...mapMutations(['SET_TOKEN', 'SET_ROLE']),
        account () {
            this.isSubmit = true
            this.validate()
            if (this.isError.some(_ => _)) {
                this.isSubmit = false
                return false
            }
            this.$http({
                url: `${api_account}/${this.isRegister ? 'register' : 'login'}`,
                method: 'post',
                headers: {'guest': true},
                data: {
                    account: this.email,
                    password: this.password1
                }
            })
            .then(res => {
                let eCode = res.data.error_code,
                    hint = res.data.hint
                // 账号错误
                if (eCode === 50001 || eCode === 50002) {
                    this.accountError = false
                    this.error_hint = hint
                    return false
                }
                // 密码错误
                if (res.data.error_code === 50003) {
                    this.error_hint = hint
                    this.isPassowrdError = true
                    return false
                }
                this.SET_TOKEN(res.data.token)
                this.SET_ROLE('user')
                // memo , avatar, nickname
                // this.SET_USERINFO(res.data.account)
                // this.$router.push(this.$route.query.redirect || '/')
                this.$router.push('/schedule')
            })
            .catch(e => { console.log(e) })
            .finally(() => {
                this.isSubmit = false
            })
        },
        validate () {
            // email
            let emailRegexp = new RegExp('^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$')
            if (!emailRegexp.test(this.email)) {
                this.$set(this.isError, 0, true)
                return false
            }
            // password 1
            if (this.password1.length < 6) {
                this.$set(this.isError, 1, true)
                return false
            }
            // password 2
            if (this.isRegister && (this.password1 !== this.password2)) {
                this.$set(this.isError, 2, true)
                return false
            }
        }
    },
    watch: {
        '$route': function (to, from) {
            this.isRegister = !this.isRegister
        }
    }
}
</script>
<style scoped lang="stylus">
.view-container
    height 100vh
    overflow hidden
    position relative
    background-position center
    background-image url('/static/img/banner.jpg')
.ui.container.main
    margin 40px 0
    position absolute
    top 50%; left 0; right 0;
    transform translateY(-50%)
.ui.segment
    max-width 500px
    margin 0 auto
    &::before
        content 'Bu Yue'
        position absolute
        top -40px
        color white
        font-size 24px
        font-style italic
.ui.form
    .input-error 
        border-color red
    .hint
        color red
        font-size 12px
</style>
